<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1{
                width: 470px;
                height: 280px;
                background-color: #cccccc;
                margin: auto;
            }
            #h{
                height: 30px;
                font-size: 20pt;
                background-color: blue;
                color: white;
                text-align: center;
            }

            #b{
                padding-left: 30px;
                padding-top: 30px;
            }

            .c1{
                color: red;
            }

            .c2{
                background-color: #ff8800;
            }
        </style>
        <script>
            function valUsername() {
                console.log("valUsername");
                var obj=document.getElementById("username");
                if(obj.value.trim()==""){
                    document.getElementById("usernameMessage").innerHTML="用户名不能为空";
                    obj.className="c2";
                    return false;
                }
                return true;
            }


            function valPassword() {
                var obj=document.getElementById("password");
                if(obj.value.length<2||obj.value.length>6){
                    document.getElementById("passwordMessage").innerHTML="密码必须在2-6位之间";
                    obj.className="c2";
                    return false;
                }
                return true;
            }


            function valRepassword() {
                var obj=document.getElementById("repassword");
                if(obj.value.length<2||obj.value.length>6){
                    document.getElementById("repasswordMessage").innerHTML="密码必须在2-6位之间";
                    obj.className="c2";
                    return false;
                }
                if(obj.value!=document.getElementById("password").value){
                    document.getElementById("repasswordMessage").innerHTML="确认密码不一致";
                    obj.className="c2";
                    return false;
                }
            }


            function valPhone() {
                var obj=document.getElementById("phone");
                var reg=/^\d{3,4}-\d{8}$/;
                if(!reg.test(obj.value)){
                    document.getElementById("phoneMessage").innerHTML="电话号码格式不正确";
                    obj.className="c2";
                    return false;
                }
                return true;
            }

            function foc(id) {
                console.log("foc");
                var obj=document.getElementById(id);
                var message=document.getElementById(id+"Message");
                obj.className="";
                message.innerHTML="";
            }



            function valForm(){
                return valUsername()&&valPassword()&&valRepassword()&&valPhone();
            }


        </script>
    </head>
    <body>
        <!--
           数据格式校验
           用户名
               不能为空
           密码
               必须在[2,6]位之间
           确认密码
               必须在[2,6]位之间
               跟密码一致
           电话
               符合025-12345678

           输入完后，离开焦点做校验
           如果校验失败
               在当前组件后面显示错误消息
               字的颜色红色
               错误组件高亮显示（改变组件的背景色）
           用户改错，获得焦点
               所有错误效果取消
       -->
        <div id="d1">
            <div id="h">注册</div>
            <div id="b">
                <form action="js01.html" onsubmit="return valForm();">
                    <table cellspacing="10">
                        <tr>
                            <td>用户名：</td>
                            <td>
                                <input type="text" name="username" id="username" onblur="valUsername();" onfocus="foc('username');"/>
                                <span id="usernameMessage" class="c1"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>密码：</td>
                            <td>
                                <input type="password" name="password" id="password" onblur="valPassword();" onfocus="foc('password');"/>
                                <span id="passwordMessage" class="c1"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>确认密码：</td>
                            <td>
                                <input type="password" name="repassword" id="repassword" onblur="valRepassword();" onfocus="foc('repassword');"/>
                                <span id="repasswordMessage" class="c1"></span>
                            </td>
                        </tr>
                        <tr>
                            <td>电话：</td>
                            <td>
                                <input type="text" name="phone" id="phone" onblur="valPhone();" onfocus="foc('phone');"/>
                                <span id="phoneMessage" class="c1"></span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="padding-left: 100px;">
                                <input type="submit" value="注册"/>
                            </td>
                        </tr>
                    </table>
                </form>

            </div>
        </div>
    </body>
</html>